<template>
    <div class="w-[456px] px-[16px] relative text-[var(--data-base-color)] h-full">
        <div class="relative h-[642px]">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="项目" name="1">
                </el-tab-pane>
                <el-tab-pane label="家庭" name="2">
                </el-tab-pane>
            </el-tabs>
            <div class="mb-[16px] flex items-center gap-[10px] h-[32px]" v-if="activeName == '1'">
                <div>项目名称</div>
                <div class="w-[282px]"><el-input placeholder="请输入项目名称" clearable @clear="getTableList"
                        v-model="searchFrom.projectName"></el-input>
                </div>
                <div><el-button type="primary" size="small" @click="getTableList">搜索</el-button></div>
            </div>
            <div class="mb-[16px] flex items-center gap-[10px] h-[32px]" v-if="activeName == '2'">
                <div>家庭名称</div>
                <div class="w-[282px]"><el-input placeholder="请输入家庭名称" clearable @clear="getTableList"
                        v-model="searchFrom.familyName"></el-input>
                </div>
                <div><el-button type="primary" size="small" @click="getTableList">搜索</el-button></div>
            </div>
            <div v-for="(item, index) in tableData.data" :key="index" class="cursor-pointer mb-[4px]"
                :class="isactive == index ? 'bg-[#254380]' : 'bg-[#162440]'" @click="checkedUnit(item)">
                <div class="flex h-[44px] items-center  mx-[16px] leading-[14px] text-[14px] gap-[16px]">
                    <div class="w-[26px] h-[26px] flex justify-center items-center rounded-[6px] bg-[#273D5B]">
                        <img src="@/assets/screenimg/projectname.png" class="w-[14px] h-[14px]" alt="">
                    </div>
                    <div class="flex-1 line-clamp-1 leading-[17px]">{{ isNullOrEmpty( item?.projectName || item?.familyName ) }}</div>
                </div>
                <div class="listborder"></div>
            </div>
        </div>
        <!-- <div class="h-[59px] w-[100%] absolute left-0 bottom-[16px]  flex justify-center items-center">
            <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
                :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getTableList" size="small"
                </div>
                <div class="listborder"></div>
            </div>
        </div>
       <div class="h-[59px] w-[100%] absolute left-0 bottom-[16px]  flex justify-center items-center">
            <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
                :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getTableList" size="small"
                style="color: #fff;" @current-change="getTableList" />
        </div> -->
    </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
import { usePageReloadStoreHook } from "@/store/modules/pageReload";
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
import { cloneDeep } from "@pureadmin/utils";
const usePageVariablesStore = usePageVariablesStoreHook();
import { ElMessage, ElMessageBox } from "element-plus";
import { projectpointsupervise } from "@/api/screen/screenmune"
import { PAGE_LAYOUTLEFTS } from "@/constant";
const channel = ref(null)
const tableData = reactive({
    data: [],
    total: 0
});
const activeName = ref('1')
const isactive = ref(0)
const searchFrom = ref({
    // page: 1,
    // limit: 15,
    familyName: '',
    projectName: '',
    commStatus: 0
});
const getTableList = () => {
    if (activeName.value == '1') {
        if (!searchFrom.value.projectName) {
            ElMessage.warning("请输入项目名称")
            return
        }
    } else {
        if (!searchFrom.value.familyName) {
            ElMessage.warning("请输入家庭名称")
            return
        }
    }
    projectpointsupervise(searchFrom.value).then(res => {
        if (activeName.value == '1') {
            tableData.data = res.result.project
        } else {
            tableData.data = res.result.family
        }
    })
    // 获取表格数据
}
const checkedUnit = (data) => {
    if (data.lng !== "" && data.lat !== "") {  //切换中心点位
        useDataDashboardThemeStore.CHANGE_SETTING({ key: 'overviewCenterPoint', value: [data.lng, data.lat] })
        console.log(useDataDashboardThemeStore.overviewCenterPoint)
    } else {
        if (activeName.value == '1') {
            ElMessage.warning("该项目暂未设置项目信息，请前往设置")
        } else {
            ElMessage.warning("该家庭未设置家庭信息，请前往设置")
        }
    }

}
onMounted(() => {
    // getTableList()
    // console.log(usePageVariablesStore.getScreen().project?.id);
    // isactive.value=usePageVariablesStore.getScreen().project.projectId
})
onBeforeMount(() => {
    channel.value = new BroadcastChannel('data-dashboard-them')
})
</script>
<style lang="scss" scoped>
.listborder {
    width: calc(100% - 32px);
    height: 1px;
    background: linear-gradient(90deg, #19243C 0%, #254380 53%, #19243C 100%);
}

::v-deep(.el-input__wrapper) {
    background-color: #001A28 !important;
}
</style>
